<template>
  <div class="buy">
    <van-nav-bar
        :title="product.name"
        left-text="返回"
        left-arrow
        fixed
        @click-left="onClickLeft"
    />
    <div class="order-info">
      <div class="adress  card">
        <div class="icon">
          <van-icon name="map-marked" />
        </div>
        <div class="order-user">
          <h1>浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</h1>
          <p class="user-info">admin 13000000000</p>
        </div>
      </div>

      <van-divider
          :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
      >
        商品详情
      </van-divider>

      <div>
        <van-card
            num="1"
            :price="product.price"
            desc="壶里乾坤紫砂商城产品"
            :title="product.name"
            :thumb="product.url"
        />
      </div>
      <van-divider
          :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
      >
        支付方式
      </van-divider>
      <div class="pay-way">
        <van-radio-group v-model="radio">
          <van-cell-group>
            <van-cell title="支付宝支付" clickable @click="radio = '1'">
              <template #right-icon>
                <van-radio name="1" />
              </template>
            </van-cell>
            <van-cell title="微信支付" clickable @click="radio = '2'">
              <template #right-icon>
                <van-radio name="2" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
    </div>
    <div class="submit">
      <van-submit-bar :price="this.product.price*100" button-text="提交订单" @submit="onSubmit" />
    </div>
  </div>
</template>

<script>
export default {
  name: "Buy",
  data(){
    return {
      product: '',
      radio: '1'
    }
  },
  created() {
    this.product = this.$route.query.product
  },
  methods:{
    onClickLeft(){
      this.$router.push({
        path: '/mall',
        query:{
          tab: 2
        }
      });
    },
    onSubmit(){
      this.$notify({type: 'success',message:'提交成功!'});
      setTimeout(()=>{
        this.$router.push({
          path: '/me',
          query:{
            tab: 4
          }
        });
      },2000)
    }
  }
}
</script>

<style scoped lang="less">
.price{
  color: #FF6201;
  font-size: 1.2rem;
  padding-right: 10px;
}
.mint-header{
  background-color: #993F26;
  position: fixed;
  width: 100%;
}
.order-info{
  background-color: #F9F9F9;
  min-height: calc(100vh - 50px);
  padding-top: 50px;
  padding-left: 5px;
  padding-right: 5px;
  .adress{
    display: flex;
    .icon{
      width: 50px;
      text-align: center;
      line-height: 60px;
      font-size: 1.5rem;
    }
    .user-info{
      color: #555;
    }
  }
}
.card{
  background-color: white;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
}
.van-card{
  background: white;
}
.pro-info{
  .header{
    font-size: 1.2rem;
    font-weight: bolder;
  }
  img{
    width: 100%;
    padding: 10px 0;
  }
}
.pay-way{
  ul{
    li{
      padding: 5px;
      font-weight: bolder;
    }
  }
}
.submit{
  position: fixed;
  width: 100%;
  bottom: 0;
  background-color: white;
  padding: 5px;
  .sum{
    margin: 0 auto;
    padding-right: 20px;
  }
}
</style>
